<!--
  ~ Copyright [2021-2021] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<form nzLayout="horizontal" nz-form [formGroup]="validateForm" (ngSubmit)="setConfig()">
  <ng-template [ngIf]="isAdd">
    <nz-form-item>
      <nz-form-label [nzSpan]="3" nzRequired>ConfigId</nz-form-label>
      <nz-form-control [nzSpan]="21" nzHasFeedback nzErrorTip="Please enter the ConfigId!">
        <nz-input-group [nzAddOnAfter]="configExt">
          <input type="text" formControlName="configName" nz-input [(ngModel)]="configName.name"/>
        </nz-input-group>
        <ng-template #configExt>
          <nz-select style="width: 120px;" [ngModel]="configName.ext" [ngModelOptions]="{standalone: true}"
                     (ngModelChange)="onExtChanged($event)">
            <nz-option nzLabel=".yaml" nzValue="yaml"></nz-option>
            <nz-option nzLabel=".yml" nzValue="yml"></nz-option>
            <nz-option nzLabel=".json" nzValue="json"></nz-option>
            <nz-option nzLabel=".xml" nzValue="xml"></nz-option>
            <nz-option nzLabel=".text" nzValue="text"></nz-option>
            <nz-option nzLabel=".properties" nzValue="properties"></nz-option>
          </nz-select>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
  </ng-template>
  <ng-template [ngIf]="!isAdd">
    <nz-form-item>
      <nz-form-label [nzSpan]="3">ConfigId</nz-form-label>
      <nz-form-control [nzSpan]="21">
        <input nz-input type="text"
               [ngModel]="config.configId" disabled
               [ngModelOptions]="{standalone: true}"
        />
      </nz-form-control>
    </nz-form-item>
  </ng-template>
  <nz-form-item *ngIf="!isAdd">
    <nz-form-label [nzSpan]="3">Hash</nz-form-label>
    <nz-form-control [nzSpan]="21">
      <input nz-input type="text"
             [ngModel]="config.hash" disabled
             [ngModelOptions]="{standalone: true}"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item *ngIf="!isAdd">
    <nz-form-label [nzSpan]="3">Version</nz-form-label>
    <nz-form-control [nzSpan]="21">
      <input nz-input type="text"
             [ngModel]="config.version" disabled
             [ngModelOptions]="{standalone: true}"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item *ngIf="!isAdd">
    <nz-form-label [nzSpan]="3">CreateTime</nz-form-label>
    <nz-form-control [nzSpan]="21">
      <input nz-input type="text"
             [ngModel]="config.createTime * 1000 | date:'yyyy-MM-dd HH:mm:ss'" disabled
             [ngModelOptions]="{standalone: true}"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-divider nzText="Config Data"></nz-divider>
  <ngx-monaco-editor style="min-height: 600px;"
                     [options]="editorOptions" [(ngModel)]="config.data"
                     [ngModelOptions]="{standalone: true}"
  ></ngx-monaco-editor>

  <nz-divider></nz-divider>
  <nz-form-item>
    <button nz-button nzType="primary" [disabled]="!validateForm.valid" nzSize="large" nzBlock>Submit</button>
  </nz-form-item>
</form>



